<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .cz a{
            border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;
        }
        .cz a:hover{background:#09F; color:#FFF; border-color:#09F; }
    </style>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 公告列表</strong></div>
    <div class="padding border-bottom">
        <div class="layui-form-item layui-inline">
            <label class="layui-btn layui-form-label" style="text-align: center" th:onclick="query()">查询</label>
            <div class="layui-input-block">
                <input class="layui-input" id="title" name="title" placeholder="输入相关信息" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-btn " style="text-align: center" th:onclick="addAnnouncement()" ><i class="layui-icon">&#xe654;</i></label>
        </div>
    </div>

    <table id="coursetable" class="table table-hover text-center">
        <tr>
            <th width="5%">编号</th>
            <th width="10%">标题</th>
            <th width="55%">内容</th>
            <th width="15%">创建时间</th>
            <th width="5%">状态</th>
            <th width="10%">操作</th>
        </tr>
        <tbody>
        <tr th:each="list:${lists}">
            <td  th:text="${list.getId()}" ></td>
            <td  th:text="${list.getTitle()}" ></td>
            <td  th:text="${list.getContent()}" ></td>
            <td  th:text="${#dates.format(list.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}" width="8%">2021-04-21 21:53:00</td>
            <td width="2%">
                <form id="form"  class="layui-form">
                    <input id="top" name="top" type="checkbox" lay-skin="switch" lay-filter="switchTest" th:value="${list.getIsShow()}" lay-text="ON|OFF" th:checked="${list.getIsShow()==0}">
                </form>
            </td>
            <td  class="cz">
                <a id="bj" th:onclick="'update('+${list.getId()}+')'"><i class="layui-icon">&#xe642;</i></a>
                <a th:href="@{/announcement/delAnnouncement/}+${list.getId()}"><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        </tbody>

    </table>
</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">

    function query() {
        var title=$("#title").val();
        window.location.href="/announcement/data_announcement?title="+title;
    }
    layui.use('layer',function(){
        var layer=layui.layer;
    });
    layui.use('form', function(){
        var form = layui.form;
        form.on('switch(switchTest)', function(data){
            var isLock=data.value;
            isLock=='1'?isLock='0':isLock='1';

            if (isLock=='0'){
                $("input[name='top']").each(function(){
                    $(this).val(1).prop('checked', false);//添加至数组
                });
                $(this).prop('checked', true);
            }
            $(this).val(isLock);
            var idTd=$(this).parent().parent().parent().find('td')[0];
            var id =$(idTd).text();
            console.log("id:"+id+" isLock:"+isLock);
            form.render();
            $.ajax({
                type:'post',
                url:"/announcement/updateIsLock/"+id+"/"+isLock,
                dataType: "text",
                async: false,
                success:function (data) {
                    if (data==1){
                        layer.msg('公告：'+ (this.checked ? '开启' : '关闭'), {
                            offset: '6px'
                        });
                    }else {
                        layer.tips('温馨提示：不要频繁修改', data.othis)
                    }
                }
            });
        });
    });
    function update(id){
        layer.open({
            type: 2,
            area: ['315px', '360px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/announcement/editAnnouncement/}]]+id
    });
    }
    function addAnnouncement(){

        layer.open({
            type: 2,
            area: ['315px', '360px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/announcement/addAnnouncement/}]]
    });
    }
</script>

</html>